<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
    <link href="/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/css/approval/public.css"/>
    <link href="/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/approval/box.css">
	<link rel="stylesheet" href="/css/plugins/jQueryUI/jquery-ui.css"/>
    <link rel="stylesheet" type="text/css" href="/css/plugins/easyui/easyui.css">
    <link rel="stylesheet" type="text/css" href="/css/plugins/easyui/icon.css">
    <style type="text/css">
		* {
			font-family: HP Simplified Light, "microsoft yahei";
            font-size: 13px;
		}
        #centerDetail{
            height: 100%;
            overflow: auto;
        }
        .top{
            padding:0 12px;
        }
        .title{
            font-size: 16px;
            color: #000;
            font-weight: 700;
            padding:25px 0px 15px 0px;
        }
        li{
            font-size: 13px;
        }
        li label{
            color: #737373;
        }
        li span{
            margin-left: 15px;
            color: #000;
        }
        .compNum{
            font-size: 14px;
            color:#000;
            margin-bottom:12px;
        }
        .doPrintBtn{
            width: 70px;
            height: 28px;
            border: 1px solid #ccc;
            background: white;
            float: right;
            margin-right: 50px;
            border-radius: 2px;
        }
        .doPrintBtn .fa-print{
            margin-right: 5px;
        }
        .doPrintBtn:hover{
            color:white;
            background: #0096D6;
            border-color:#0096D6;
        }
    </style>
    <style media=print type="text/css">
        .noPrint{
            visibility:hidden
        }
        /*@page {
            size: A4 landscape;  !*A4纸，横向打印*!
            margin: 0;!*去掉页边距*!
        }*/
        @media print {
          @page { margin: 0; }
          body { margin: 1cm; }
        }
    </style>

    <title>Print Approval</title>
</head>
<body>
    <div id="centerDetail" data-options="region:'center',border:false">
        <div class="top">
            <div class="title">
                <span th:text="${approval.title}"></span>
            </div>
            <ul>
                <li><label for="">Author</label><span th:text="${approval.createUserNm}+'/'+${approval.createUserJob}"></span><span th:text="${#dates.format(approval.createTime, 'yyyy-MM-dd hh:mm:ss')}"></span></li>
                <li>
                    <label for="">Printer</label><span id="printer"></span><span th:text="${#dates.format(new java.util.Date().getTime(), 'yyyy-MM-dd hh:mm:ss')}"></span>
                    <button type="button" class="doPrintBtn noPrint"><i class="fa fa-print" aria-hidden="true"></i>Print</button>
                </li>
            </ul>
            <div style="margin-top:15px;border-top: 1px solid #000"></div>
        </div>

        <div class="detailBody">
            <div class="compNum" th:if="${approval.completeNum} != null"><label>Completion Number：</label><span id="num"></span></div>
            <table id="approvalLinesTable" data-mobile-responsive="false"></table>
            <div id="contentText" class="summernote"></div>
        </div>
    </div>

	<script src="/js/jquery.min.js?v=2.1.4"></script>
	<script src="/js/plugins/easyui/jquery.easyui.min.js"></script>
	<script src="/js/bootstrap.min.js?v=3.3.6"></script>
    <script src="/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="/js/plugins/layer/layer.js"></script>
    <script src="/js/plugins/summernote/summernote.min.js"></script>
	<script src="/js/plugins/summernote/summernote-zh-CN.js"></script>

	<script src="/js/ajax-util.js"></script>
    <script type="text/javascript" th:inline="javascript">
        $().ready(function() {
            $('.doPrintBtn').bind('click',function () {
                window.print();
            })
            let appId = [[${approval.appId}]];
            let animal = JSON.parse(sessionStorage.getItem("howAreYou"));
            $('#printer').text(animal.empNm+'/'+animal.hrJobNm)
            $('#num').text([[${approval.completeNum}]])

            loadApprovalLines(appId);

			//loadAttachment(r.attachmentList);
			loadContent([[${approval.content}]]);
            $(".detailBody").show();
		});

        function loadApprovalLines(appId) {
            $('#approvalLinesTable')
                .bootstrapTable(
                    {
                        method : 'get', // 服务器数据的请求方式 get or post
                        url : '/approval/query/listLines', // 服务器数据的加载地址
                        cache: false,
                        //	showRefresh : true,
                        //	showToggle : true,
                        locale: "zh-CN",
                        //locale: "en-US",
                        //locale: "ko-KR",
                        iconSize : 'outline',
                        toolbar : '#exampleToolbar',
                        striped : false, // 设置为true会有隔行变色效果
                        dataType : "json", // 服务器返回的数据类型
                        pagination : false, // 设置为true会在底部显示分页条
                        // queryParamsType : "limit",
                        // //设置为limit则会发送符合RESTFull格式的参数
                        singleSelect : false, // 设置为true将禁止多选
                        // contentType : "application/x-www-form-urlencoded",
                        // //发送到服务器的数据编码类型
                        //search : true, // 是否显示搜索框
                        showColumns : false, // 是否显示内容下拉框（选择显示的列）
                        sidePagination : "server",
                        uniqueId: 'appLineId',
                        queryParams : function(params) {
                            return {
                                //说明：传入后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对
                                appId : appId,
                                orderBy:'seq'
                            };
                        },
                        onLoadSuccess:function(data) {
                            if(data.code == 500){
                                layer.msg(data.msg);
                                return;
                            }
                            let item = data.list;
                            for(let index = 0;index< item.length;index++) {
                                if(item[index].receiptTime != null){
                                    let agentString = item[index].agent == null||item[index].agent === '' ||  item[index].status===0
                                        ? ''
                                        : item[index].status === 5 ? ''
                                            : '[Proxy approval] '+item[index].receiverName+'/'+item[index].receiverJob
                                            + ' <i class="fa fa-long-arrow-right" aria-hidden="true"></i> '
                                            + item[index].agent.agentInfo +'&nbsp'+ '<br/>';

                                    let remarkString = item[index].remark == null||item[index].remark === '' ? '' : item[index].remark+'&nbsp';

                                    if(agentString!=='' || remarkString !==''){
                                        $('#approvalLinesTable').bootstrapTable('insertRow', {index: index+1, row: {
                                                seq : index,
                                                handleType:item[index].handleType,
                                                handleTypeName : item[index].handleTypeName,
                                                receiverName : agentString + remarkString
                                            }
                                        });
                                    }
                                }
                            }
                            for(let index = 0;index< item.length;index++) {
                                if(item[index].receiptTime != null){
                                    let agentString = item[index].agent == null||item[index].agent === '' || item[index].status === 0
                                        ? ''
                                        : item[index].status === 5 ? '' :'not null';

                                    let remarkString = item[index].remark == null||item[index].remark === '' ? '' : 'not null';

                                    if(agentString!=='' || remarkString !==''){
                                        //合并列
                                        $('#approvalLinesTable').bootstrapTable('mergeCells', { index: index+1, field: 'receiverName', colspan: 3, rowspan: 1 });
                                        //合并行
                                        $('#approvalLinesTable').bootstrapTable('mergeCells', { index: index, field: 'seq', colspan: 1, rowspan: 2 });
                                        $('#approvalLinesTable').bootstrapTable('mergeCells', { index: index, field: 'handleTypeName', colspan: 1, rowspan: 2 });
                                    }
                                }
                            }
                        },
                        columns : [
                            {
                                field : 'appDetailId',
                                title : 'id',
                                visible: false
                            },
                            {
                                field : 'seq',
                                title : 'No.',
                                align : 'center',
                                valign : 'middle',
                                width: '30px',
                            },
                            {
                                field : 'handleTypeName',
                                title : 'Type',
                                width : '50px',
                                valign : 'middle',
                                cellStyle: function(value,row){
                                    let color = '';
                                    switch(row.handleType){
                                        case 0://draft
                                            color = '#EFEFF0;';
                                            break;
                                        case 1://approval
                                            color = '#CCE3F7;';
                                            break;
                                        case 2://consent 4
                                            color = '#cfedf6;';
                                            break;
                                        case 3:
                                            color = '#D0D7F0;';
                                            break;
                                        case 4:
                                            color = '#cfedf6;';
                                            break;
                                        case 7:
                                            color = '#CCE3F7;';
                                            break;
                                        case 9://notification
                                            color = '#dadee0;';
                                            break;
                                    }
                                    return {
                                        css : {
                                            'background-color' : color
                                        }
                                    };
                                },
                                formatter : function(value, row, index) {
                                    switch(row.status){
                                        case 1://同意
                                            switch(row.handleType){
                                                case 1://审批人
                                                    value = 'Approved';
                                                    break;
                                                case 2://协议人
                                                    value = 'Consent';
                                                    break;
                                                case 3://后批人
                                                    value = 'Approved';
                                                    break;
                                                case 4://平行合意人
                                                    value = 'Parallel consent';
                                                    break;
                                                case 7://平行审批人
                                                    value = 'Parallel approved';
                                                    break;
                                                case 9://
                                                    value = 'Notification';
                                                    break;
                                            }
                                            break;
                                        case 2://驳回
                                            value = 'Reject';
                                            break;
                                        case 3://特批
                                            value = 'Arbitrary decision';
                                            break;
                                        case 5://自动审批
                                            switch(row.handleType){
                                                case 1://审批人
                                                    value = 'Approval';
                                                    break;
                                                case 2://协议人
                                                    value = 'Consent';
                                                    break;
                                                case 3://后批人
                                                    value = 'Post approval';
                                                    break;
                                                case 4://平行合意人
                                                    value = 'Parallel consent';
                                                    break;
                                                case 7://平行审批人
                                                    value = 'Parallel approval';
                                                    break;
                                                case 9://
                                                    value = 'Notification';
                                                    break;
                                            }
                                            break;
                                    }
                                    return value;
                                }
                            },
                            {
                                field : 'receiverName',
                                title : 'Name',
                                width: '150px',
                                cellStyle: function(value,row){
                                    let color = '';
                                    if(value.indexOf('&nbsp')>0){
                                        switch(row.handleType){
                                            case 0://draft
                                                color = '#F7F7F7;';
                                                break;
                                            case 1://approval
                                                color = '#E5F1FB;';
                                                break;
                                            case 2://consent
                                                color = '#E7F6FA;';
                                                break;
                                            case 3://Post approval
                                                color = '#E7EBF7;';
                                                break;
                                            case 4://Parallel consent
                                                color = '#E7EBF7;';
                                                break;
                                            case 7://Parallel approval
                                                color = '#E7F6FA;';
                                                break;
                                            // case 9:
                                            //     color = '#E5F1FB;';
                                            //     break;
                                        }
                                    }
                                    return {
                                        css : {'background-color' :color}
                                    }
                                },
                                formatter : function(value, row, index) {
                                    if(value.indexOf('&nbsp') > 0){
                                        return value;
                                    }else{
                                        let str = ''
                                        empId = '';

                                        if(row.agentUserId != null && row.status !==5 && row.status !==0 ){//是代理人审批的，且不是自动审批的或者未审批的
                                            str = row.agent.agentInfo;
                                            empId = row.agentUserId
                                        }else{
                                            str = value+'/'+row.receiverJob;
                                            empId = row.receiverEpid
                                        }
                                        var e = '<a href="#" title=\''+str+'\'  onclick="showEmp(\'' + empId + '\')">'+str+'</a> ';
                                        return e;
                                    }
                                }
                            },
                            {
                                field : 'handleTime',
                                title : 'Processing date',
                                width : '150px',
                                formatter : function(value, row, index) {
                                    if(value == null){
                                        if(row.handleType == 9){
                                            value = row.readTime;
                                        }else{
                                            value = 'Pending';
                                        }
                                    }

                                    return value;
                                }
                            },
                            {
                                field : 'receiverDeptNm',
                                title : 'Team',
                                width : '40px',
                                // formatter : function(value, row, index) {
                                //     return 'HPPS';
                                // }
                            }
                        ]
                    });
        }

        function loadContent(code){
            $('.summernote').summernote({
                lang : 'zh-CN'
            });
            $('#contentText').summernote('code',code);
            $('.summernote').summernote('destroy');
        }
    </script>
</body>